<template>
	<div class='content-box'>
		<div class='overflow'>
			<div style='float:left;line-height:28px;'>升级版本</div>
			<div class='pull-left m-l-30' style='width:300px;'>
				<el-select size='mini' class='w-100' filterable clearable v-model='upgrade.version' clearable placeholder='请选择'>
					<el-option
					  v-for='item in packpages'
					  :key='item.name'
					  :label='item.name'
					  :value='item.name'>
					</el-option>
				</el-select>
			</div>
		</div>
		<div class='overflow m-t-20'>
			<div style='float:left;line-height:28px;'>选择设备</div>
			<div class='pull-left m-l-30' style='width:1200px;background:#f6f9fe;padding:20px;'>
				<div>
					<span>
						<el-select size='mini' filterable clearable placeholder='版本号' v-model='filter.version'>
							<el-option
							v-for='item in packpages'
							:key='item.name'
							:label='item.name'
							:value='item.name'>
							</el-option>
						</el-select>
					</span>
					<span class='m-l-20'>
						<el-input size='mini' placeholder='设备号' v-model='filter.deviceNo' style='width:200px'></el-input>
					</span>
					<span class='m-l-20'>
						<el-button size='mini' type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
					</span>
				</div>
				<div class='content-box m-t-20'>
					<el-table style='width:100%;font-size:12px;' ref='multipleTable' :data='listData' @selection-change='handleSelectionChange'>
						<el-table-column type='selection' width='55'></el-table-column>
						<el-table-column label='设备号'>
							<template slot-scope='scope'>{{ scope.row.deviceNo }}</template>
						</el-table-column>
						<el-table-column label='版本号'>
							<template slot-scope='scope'>{{ scope.row.version }}</template>
						</el-table-column>
						<el-table-column label='设备名称' align='center'>
							<template slot-scope='scope'>{{ scope.row.deviceName }}</template>
						</el-table-column>
						<el-table-column label='所属代理' align='center'>
							<template slot-scope='scope'>{{ scope.row.agentName}}</template>
						</el-table-column>
						<el-table-column label='所属门店'>
							<template slot-scope='scope'>{{ scope.row.storeName}}</template>
						</el-table-column>
						<!-- <el-table-column label='操作' width='200'>
							<template slot-scope='scope'>
								<router-link :to=''price/add/' + scope.row.id' class='color-primary m-l-15'>编辑</router-link>
								<el-button size='mini' class='m-l-10' type='text' @click='deletePrice(scope.row.id)'>删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<div class='m-t-30'>
						<pagination ref='pagination' :query='pageQuery' v-on:page='listData=$event' url='upgrade/getWaitUpgradeDeviceList'></pagination>
					</div>
					<div>
						 <el-button type='primary' size='mini' @click='submit'>升级</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import pagination from '@/components/pagination.vue'
	import { Request, confirm, successToast, errorToast, loading } from '@/utils'
	let request = new Request()
	export default {
		data() {
			return {
				filter : {
					version : '',
					deviceNo : '',
					agentId : '',
					storeId : ''
				},
				
				pageQuery : {
					
				},
				
				upgrade : {
					version : '',
					deviceNos : []
				},
				
				
				packpages : [],
				listData : []
			}
		},
		
		components : {
			pagination
		},
		
		methods : {
			search : function(){
				let filter = Object.assign({}, this.filter)
				this.pageQuery = filter
				
				this.$nextTick(() => {
					this.$refs.pagination.initPage()
				})
	
			},
			handleSelectionChange : function(event){
				this.upgrade.deviceNos.splice(0)
				event.forEach(v => {
					this.upgrade.deviceNos.push(v.deviceNo)
				})
				
			},
			
			submit : function(){
				let data = this.upgrade
				let load = loading('正在发送，请勿关闭页面', this)
				request.post('upgrade/upgradeDevice', res => {
					load.close()
					if(res.code == 0){
						successToast('命令下发成功，请在升级记录里查看结果', this)
					}else{
						errorToast(res.msg, this)
					}
				}, data)
			}
			
		},
		
		created () {
			request.get('upgrade/getVersionSelect', res => {
				if(res.code == 0 && res.data){
					this.packpages = res.data
				}
			})
		}
	}
</script>

<style>

</style>
